<template>
	<view class="box">
		<!--html-->
		<block v-if="content!== null">
			<rich-text :nodes="content"></rich-text> 
		</block>
	  <!-- 下载附件 --> 
		<view class="loadBox" v-if="load">
			<view class="loadTitle">其他附件</view>
			<view>{{showAccessory}}</view>
			<!-- #ifdef H5 -->
				<a class="downFile load" :href="singleUrl" target='_blank'>下载附件</a>
			<!-- #endif -->
			<!-- #ifndef H5 -->
				<view @click="downFile"  class="load">下载附件</view>
			<!-- #endif -->
		</view>
		<view v-if="showProject">
			<view class="broker">佣金:{{content1.brokerChargeExplain}}</view>
			<view class="brokerBtn" :data-id="content1.projectId" @click="goToAddorder">立即录单</view>
		</video>
	  </view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				content:null,
				load:false,
				showAccessory:"",
				singleUrl:"",
				content1: {projectId:0,brokerChargeExplain:"安居分"},
				showProject: false,
				projectId: null,
			}
		},
		onLoad(option) {
			let obj = JSON.parse(option.obj);
			this.getList(obj.id);
			if (obj.projectId != null) {
			    this.showProject = true;
				this.projectId = obj.projectId;
			    uni.setStorageSync('projectId', obj.projectId);
			}
		},
		methods:{
			//立即录单
			goToAddorder() {
				console.log(this.projectId)
				uni.navigateTo({
				    url: "../../../addOrder/addOrder?id="+ this.projectId +"&fapai=true"
				});
			},
			//获取详细信息
			async getList(id){
				try{
					let resData = await this.$api.getArtDetail(id);
					//处理图片
					let content = resData.data.data.content;
					let newContent = content.replace(/(\<img|\<p)/gi, function ($0, $1) {
					  return {
						"<img": '<img style="width:100%;height:auto;display:block;" ',
						"<p": '<p style="text-indent: 24px;" ',
						"<article": "<div",
						"</article": "</div",
						"<header": "<div",
						"</header": "</div"
					  }[$1];
					});
					this.content = newContent;
					this.content1 =  resData.data.data;
					this.showAccessory = resData.data.data.showAccessory;
					this.singleUrl =  resData.data.data.singleUrl
					//判断是否有下载文件
					if (resData.data.data.singleUrl == null) {
					    this.load = false
					}else{
						this.load = true
					}
					
				}catch(e){
					//TODO handle the exception
				}
			},
			//下载附件
			downFile() {
				uni.downloadFile({
				    url:this.singleUrl,
				    success: (res) => {
				      if (res.statusCode === 200) {
				        uni.saveFile({
				          tempFilePath: res.tempFilePath,
				          success: (resData) => {
				            uni.openDocument({
				              filePath: resData.savedFilePath,
				            });
				          },
				        });
				      }
				    },
				})
			}
		}
	}
</script>

<style scoped>
	.box {
	    padding:30rpx;
	    background-color: white;
	}
	.main {
	    width: 100%;
	    font-size: 15px;
	    text-align: center;
	    padding-top: 100rpx;
	    color: #999999;
	    line-height: 50px;
	}
	.wsjimg {
	    width: 180px;
	    height: 125px;
	    margin: 0 auto;
	}
	.text {
	    font-size: 15px;
	    color: #999999;
	    text-align: center;
	    margin-top: 40rpx;
	}
	.broker {
	    padding: 10rpx;
	    font-size: 12px;
	    color: #52AAF8;
	    background-color: rgb(225, 244, 255);
	    text-align: center;
	    margin-top: 40rpx;
	}
	.brokerBtn {
	    background-color: #52AAF8;
	    color: white;
	    font-size: 16px;
	    border-radius: 25px;
	    text-align: center;
	    line-height: 80rpx;
	    margin: 40rpx 0;
	}
	
	.loadBox {
	    border: 1px #999999 dashed ;
	    width: 100%;
	    padding: 20rpx;
	    margin-top: 30rpx;
	}
	
	.loadTitle {
	    margin-bottom: 20rpx;
	    font-size: 16px;
	    font-weight: bold;
	}
	
	.load {
	    width: 100%;
	    line-height: 80rpx;
	    margin: 50rpx 0 20rpx 0;
	    border-radius: 25px;
	    background-color: #52AAF8;
	    color: white;
	    text-align: center;
	}
	.downFile{
		display: block;
	}
</style>
